<template>
  <div class="add">
    <BaseDialog
      :title="isType === 'add' ? '新增' : '编辑'"
      width="800px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :saveBtnLoading="saveBtnLoading"
        :isCalculateLayout="true"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import { handleTree, columnFilters, getSubZhEn } from "@/utils/mUtils.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  visible: "0",
  status: "0",
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        content: [
          {
            x: 0,
            y: 0,
            w: 8,
            h: 1,
            i: "1",
            label: "角色编码",
            prop: "roleId",
            type: "label_input",
            placeholder: "请输入角色编码",
            disabled: true,
            span: 12,
          },
          {
            label: "角色名称",
            prop: "roleName",
            type: "label_input",
            placeholder: "请输入角色名称",
            span: 12,
            maxlength: 30,
            x: 8,
            y: 0,
            w: 8,
            h: 1,
            i: "2",
          },
          {
            label: "机构级别",
            prop: "siteRankCode",
            name: "siteRankName",
            type: "label_select",
            options: [],
            props: {
              value: "subCode",
              label: "subName",
            },
            placeholder: "请选择机构级别",
            span: 12,
            x: 0,
            y: 1,
            w: 8,
            h: 1,
            i: "3",
          },
          {
            label: "数据权限",
            prop: "dataScope",
            type: "label_select",
            options: [
              { label: i18n.global.t("全部数据权限"), value: "1" },
              { label: i18n.global.t("自定数据权限"), value: "2" },
              { label: i18n.global.t("当前组织数据权限"), value: "3" },
              { label: i18n.global.t("当前组织及下级数据权限"), value: "4" },
              { label: i18n.global.t("当前用户数据权限"), value: "5" },
            ],
            span: 12,
            x: 8,
            y: 1,
            w: 8,
            h: 1,
            i: "4",
          },
          {
            label: "组织架构",
            prop: "orgList",
            textProp: "orgName",
            type: "label_site_tree",
            rowId: "code",
            treeDate: [],
            placeholder: "请选择组织架构",
            treeSelectType: "checkbox",
            span: 12,
            hide: true,
            x: 8,
            y: 2,
            w: 8,
            h: 1,
            i: "5",
          },
          {
            label: "显示排序",
            prop: "roleSort",
            type: "label_number",
            span: 12,
            x: 8,
            y: 2,
            w: 8,
            h: 1,
            i: "6",
          },
          {
            label: "状态",
            type: "label_radio_group",
            prop: "status",
            options: [
              { value: "0", label: i18n.global.t("启用") },
              { value: "1", label: i18n.global.t("停用") },
            ],
            span: 12,
            x: 0,
            y: 0,
            w: 8,
            h: 1,
            i: "7",
          },
        ],
      },
    ],
  },
]);
const rules = ref({
  roleName: [
    {
      required: true,
      message: i18n.global.t("请输入角色名称"),
      trigger: "change",
    },
  ],
  siteRankCode: [
    {
      required: true,
      message: i18n.global.t("请选择机构级别"),
      trigger: "change",
    },
  ],
  orgStr: [
    {
      required: true,
      message: i18n.global.t("请选择组织架构"),
      trigger: "change",
    },
  ],
});
watch(
  () => formData.value.dataScope,
  (val) => {
    if (val === "2") {
      columnFilters(formColumns.value, "orgList").hide = false;
    } else {
      columnFilters(formColumns.value, "orgList").hide = true;
    }
  },
  {
    immediate: true,
  }
);
const saveBtnLoading = ref(false);

onMounted(() => {
  if (props.isType === "edit") {
    getInfo();
  }
  onGetSub();
});
const getInfo = async () => {
  saveBtnLoading.value = true;
  try {
    const { data } = await api.default.system.role.getInfo(
      props.currRow.roleId
    );
    formData.value = {
      ...data,
      orgName: data.orgList
        ? data.orgList.map((item) => item.siteName).join(",")
        : "",
    };
    saveBtnLoading.value = false;
  } catch (err) {
    saveBtnLoading.value = false;
  }
};
const onGetSub = () => {
  api.default.system.menu
    .list({
      tyle: 1,
    })
    .then((res) => {
      const menu = [
        {
          menuId: "0",
          menuName: i18n.global.t("主类目"),
          children: [],
        },
      ];
      menu[0].children = handleTree(res.data, "menuId", "", "", "0");
      columnFilters(formColumns.value, "orgList").treeDate = menu;
    });
  getSubZhEn({
    code: "001",
  }).then((res) => {
    columnFilters(formColumns.value, "siteRankCode").options = res["001"];
  });
};

const onSubmit = () => {
  const parmas = {
    ...formData.value,
    orgList: formData.value.orgList
      ? formData.value.orgList.map((item) => {
          return {
            ...item,
            siteCode: item.code,
            siteName: item.name,
          };
        })
      : [],
  };
  if (props.isType === "add") {
    // 新增
    saveBtnLoading.value = true;
    api.default.system.role
      .add({
        ...parmas,
        type: 1,
      })
      .then(() => {
        ElMessage.success("新增成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    api.default.system.role
      .edit(parmas)
      .then(() => {
        ElMessage.success("修改成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
